<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>天气案例_监视属性_简写</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h2>今天天气很{{isHot ? '炎热' : '寒冷'}}</h2>
      <button @click="isHot = !isHot">点我切换天气</button>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false;

    const vm = new Vue({
      el: "#root",
      data: {
        isHot: true,
      },
      watch: {
        // 正常写法
        /* isHot: {
                // immediate: true,// 初始化时让handler调用一下
                // deep: true,// 深度监视
                handler(newValue, oldValue) {
                    console.log('idHot被改了', newValue, oldValue)
                }
            } */
        // 简写
        /* isHot(newValue, oldValue) {
                console.log('idHot被改了', newValue, oldValue)
            } */
      },
    });

    //正常写法
    /* vm.$watch('isHot', {
        // immediate: true,//初始化时让handler调用一下
        // deep: true,//深度监视
        handler(newValue, oldValue) {
            console.log('idHot被改了', newValue, oldValue)
        }
    }) */
    // 简写（不能写成箭头函数）
    vm.$watch("isHot", function (newValue, oldValue) {
      console.log("idHot被改了", newValue, oldValue);
    });
  </script>
</html>
